<template>
    <view class="specification-popup" v-if="show" @touchmove.stop.prevent="">
		<view class="mask" @click="close(text,count)"></view>
		<view class="content">
			<view class="close_icon">
				<img src="/static/img/x.png" @click="close(text,count)" />
			</view>
			<view class="goods_info">
				<view class="img">
					<img src="https://kuaichuang.insunny.cc/temp_img/goods.png" />
				</view>
				<view class="price">
					<p>价格：￥{{ specification.old_price }} 折后到手￥{{ specification.new_price }}</p>
					<span>{{ select_specification ? `已选：${select_specification}` : '请选择规格属性' }}</span>
				</view>
			</view>
			<view class="item_box">
				<view class="item" v-for="(item,index) in specification.select_list" :key="index">
					<view class="title">{{ item.title }}</view>
					<view class="select_button_box">
						<view class="select_button " 
						:class="items.stock_insufficiency ? 'select_gary' : item.active === i ? 'select_red' : ''"
						 @click="select_button(item,index,items,i)" v-for="(items,i) in item.data" :key='i'>
							{{ items.value }}
						</view>
					</view>
				</view>
			</view>
			<view class="num_box">
				<view class="title">数量</view>
				<view class="count">
					<view class="sub_button" @click="sub_count">
						<img src="/static/img/sub.png" />
					</view>
					<view class="num" @click="show_input_fun">
						{{ count }}
					</view>
					<view class="add_button" @click="add_count">
						<img src="/static/img/add.png" />
					</view>
				</view>
			</view>
		</view>
		<!-- 点击数量的输入框弹窗 -->
		<view class="pop_input" v-if="show_input">
			<view class="mask_inside" @click="show_input = false">
			</view>
			<view class="input">
				<view class="count">
					<view class="sub_button" @click="sub_count">
						<img src="/static/img/sub.png" />
					</view>
					<view class="num">
						<input type="number" :value="input_count" v-on:input="input" min="1" :max="stock_count" />
					</view>
					<view class="add_button" @click="add_count">
						<img src="/static/img/add.png" />
					</view>
				</view>
				<view class="buttons">
					<view class="concel_button" @click="show_input = false">取消</view>
					<view class="sure_button" @click="sure">确定</view>
				</view>
			</view>
		</view>
    </view>
</template>
<script>
	const data = require("@/static/json/sellerDetails.json")
export default {
    data() {
        return {
			show: false,								// 当前弹窗是否开启
			count: 1,									// 数量
			specification: data.specification,			// 
			select_specification: '',					// 选择规格
			show_input: false,							// 是否开始手动输入数量
			input_count: 1,								// 输入框输入的数量
			text: [],									// 选择列表
			stock_count: 1								// 库存数量
		};
    },
    methods: {
		// 关闭当前弹窗
		close(data, count) {
			this.show = false
			if(!data && !count) {
				return ;
			}
			let flag = true
			data.forEach(item => {
				if(!item){
					return flag = false
				}
			})
			if(flag) {
				let specification = data.join('; ') + ' ×' + count
				this.$store.dispatch('sumbit/get_specification',specification)
			}
		},
		// 规格属性选择
		select_button(item, index, items, i) {
			if (items.stock_insufficiency) {
				return ;
			}
			item.active = i
			this.text.splice(index, 1, items.value)
			this.select_specification = this.text.join('  ')
		},
		// 数量减号按钮
		sub_count() {
			var fun = (count => {
				if (this[count] > 1) {
					this[count]--
				} else {
					this[count] = 1
				}
			})
			if (!this.show_input) {
				fun('count')
			} else {
				fun('input_count')
			}
		},
		// 数量加号按钮
		add_count() {
			var fun = ((count) => {
				if (this[count] < this.stock_count) {
					this[count]++
				} 
				if (this[count] >= 99 && this.stock_count >= 99) {
					this[count] = 99
					this.toast('单品已上限')
				}
				if (this[count] >= this.stock_count) {
					this[count] = this.stock_count
					this.toast('库存不足')
				} 
			})
			if (!this.show_input) {
				fun('count')
			} else {
				fun('input_count')
			}
		},
		// 点击数量中的数字弹出
		show_input_fun() {
			this.input_count = this.count
			this.show_input = true
		},
		// 输入框限制最大数
		input(e) {
			let val = Number(e.target.value);
			this.input_count = e.detail.value
			if (val > this.stock_count && this.stock_count < 99) {
				this.$nextTick(function() {
					this.input_count = this.stock_count
					this.toast('库存不足')
				})
			} else if (val >= 99) {
				this.$nextTick(function() {
					this.input_count = 99
					this.toast('单品已上限')
				})
			}
		},
		// 确定按钮
		sure() {
			this.count = this.input_count
			this.show_input = false
		},
		// 轻提示
		toast(hint) {
			uni.showToast({
				title: hint,
				duration: 2000,
				icon: 'none'
			})
		}
	},
    mounted() {
		while(this.text.length < this.specification.select_list.length){
			this.text.splice(0, 0, '')
		}
	},
};
</script>
<style scoped lang='scss'>
@import "./index.scss";
</style>
